<!--群组管理-->
<template>
  <div class="listingPage">
    <div class="listingPage-menu">
      <el-form-item label="群组名称" prop="applyTitle">
        <el-input v-model="queryParams.keyword" placeholder="请输入群组名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="search">搜索</el-button>
        <el-button icon="Plus" @click="newlyAddedFn">新增</el-button>
      </el-form-item>
    </div>
    <el-table v-loading="loading" :data="templateData">
      <el-table-column label="序号" width="70" align="center" type="index" />
      <el-table-column label="群组名称" min-width="60" align="center" prop="name" />
      <el-table-column label="创建人" min-width="60" align="center" prop="creatorName" />
      <el-table-column label="创建时间" min-width="60" align="center" prop="createTime" />
      <el-table-column label="更新时间" min-width="60" align="center" prop="updateTime" />
      <el-table-column label="操作" min-width="60" align="center">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="editGroup(scope.row.id)">编辑 </el-button>
          <el-popconfirm title="是否确认删除该模板?" width="220" @confirm="deleteTemplate(scope.row.id)">
            <template #reference>
              <el-button link type="danger" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="listingPage-pagination">
      <el-pagination
        :background="true"
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50]"
        :total="totalData"
        @change="search"
      />
    </div>
  </div>
  <!--人员选择弹窗-->
  <PersonnelSelection ref="personnelSelectionDialog" @submit="submit"></PersonnelSelection>
  <!--新增群组-->
  <el-dialog
    :title="groupPopUpsTitle"
    v-model="groupPopUps"
    width="80%"
    center
    align-center
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <el-form :model="formData" label-width="auto" ref="ruleFormRef" :rules="rules">
      <el-form-item label="群组名称：" prop="name">
        <el-input v-model="formData.name" placeholder="请输入群组名称" />
      </el-form-item>
      <el-form-item label="人员列表：" prop="aListOfPeopleInTheGroup">
        <div class="listOfPeople-input" @click="selector(formData.aListOfPeopleInTheGroup)">
          <span v-if="formData.aListOfPeopleInTheGroup.length === 0" class="input-personnelList">请选择人员</span>
          <el-tag
            v-else
            v-for="(item, index) in formData.aListOfPeopleInTheGroup"
            :key="index"
            closable
            class="input-item"
            type="info"
            @close="handleClose(item)"
          >
            {{ item.userName }}
          </el-tag>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <importComponentsInBulk
        v-if="groupPopUpsTitle === '编辑群组'"
        :theCurrentGroupID="theCurrentGroupID"
        @editGroup="editGroup"
      ></importComponentsInBulk>
      <el-button @click="groupPopUps = false">取消</el-button>
      <el-button type="primary" @click="groupSubmissions">提交</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import importComponentsInBulk from "@/components/FormComponents/importComponentsInBulk.vue";
import { delGroup, getGroup, setGroup, groupDetails } from "@/api/partyBuilding";
import PersonnelSelection from "@/components/flowDemo/PersonnelSelectionDialog.vue";
import { ElMessage } from "element-plus";
//模版数据
const templateData = ref([]);
//加载状态加载中
const loading = ref(false);
//当前群组ID
const theCurrentGroupID = ref(null);
//查询参数
const queryParams = ref({
  pageNum: 1, //当前页码
  pageSize: 10, //每页条数
  keyword: "", //搜索参数
});
//总条数
const totalData = ref(0);
/**
 * 新增
 */
const newlyAddedFn = () => {
  groupPopUps.value = true;
  groupPopUpsTitle.value = "新增群组";
};
//群组弹窗状态
const groupPopUps = ref(false);
//群组弹窗标题
const groupPopUpsTitle = ref("");
//新增群组表单实例
const ruleFormRef = ref(null);
//新增群组表单数据
const formData = reactive({
  id: "", //群组ID
  name: "", //群组名称
  aListOfPeopleInTheGroup: [], //群组人员列表
});
//新增群组校验
const rules = reactive({
  name: [{ required: true, message: "请输入群组名称", trigger: "blur" }],
  aListOfPeopleInTheGroup: [{ type: "array", required: true, message: "请选择人员", trigger: "blur" }],
});
/**
 * 关闭弹窗重置数据
 */
const closeDialog = () => {
  formData.id = "";
  formData.name = "";
  formData.aListOfPeopleInTheGroup = [];
};
/**
 * 群组编辑
 * @param id
 */
const editGroup = async id => {
  formData.name = "";
  theCurrentGroupID.value = id;
  const {
    data: { data, name },
  } = await groupDetails(id);
  const newFormData = { name, aListOfPeopleInTheGroup: JSON.parse(data), id };
  Object.assign(formData, newFormData);
  groupPopUps.value = true;
  groupPopUpsTitle.value = "编辑群组";
};
/**
 * 人员选择弹窗提交
 * @param value 数据
 */
const submit = value => (formData.aListOfPeopleInTheGroup = value);
const personnelSelectionDialog = ref(); //人员选择弹窗
/**
 * 打开人员选择弹窗
 * @param value 人员待选数据
 */
const selector = value => {
  personnelSelectionDialog.value.showDialog(value);
};
/**
 * 群组提交
 * @returns {Promise<void>}
 */
const groupSubmissions = async () => {
  try {
    const params = {
      id: formData.id,
      name: formData.name,
      data: JSON.stringify(formData.aListOfPeopleInTheGroup),
    };
    //先新增模板，在重新查询最新模板列表。
    await setGroup(params);
    ElMessage.success("保存成功");
    //查询最新模板列表,等待接口返回后关闭弹窗
    await search();
  } catch (error) {
    //框架统一对catch里面已做处理 这里无需重复错误提示。
  } finally {
    groupPopUps.value = false;
  }
};
/**
 * 人员删除
 * @param value 删除的元素
 */
const handleClose = value => {
  formData.aListOfPeopleInTheGroup = formData.aListOfPeopleInTheGroup.filter(item => item.userId !== value.userId);
};
/**
 * 删除模板
 * @param id 模板id
 */
const deleteTemplate = async id => {
  //先删除模板，在重新查询最新模板列表。
  await delGroup(id);
  ElMessage.success("删除成功");
  //最新群组列表数据
  search();
};
/**
 * 查询列表页面
 * @returns {Promise<void>}
 */
const search = async () => {
  loading.value = true;
  const { rows, total } = await getGroup(queryParams.value);
  totalData.value = total;
  templateData.value = rows;
  loading.value = false;
};
onMounted(() => {
  search();
});
</script>
<style lang="less">
@import "@/assets/styles/index.less";
</style>
<style lang="less" scoped>
//群组页面
.el-overlay-dialog {
  .el-dialog {
    //弹窗内容
    .el-dialog__body {
      .listOfPeople-input {
        border: 1px solid #dcdfe6;
        min-height: 60px;
        cursor: pointer;
        color: #c3c3c3;
        width: 100%;
        padding: 0 11px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 10px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
